<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0 , user-scalable=0" name="viewport" />
    <meta charset="UTF-8">
    <title>html5实现网页解锁功能(基于iphone6)</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            width: 380px;
            height: 600px;
        }

        #set {
            margin-left: 120px;
        }

        #test {
            margin-top: 20px;
            margin-left: 120px;
        }
    </style>
    <script type="text/javascript">
        /**
         * 半径，画布宽度，画布高度，画布x内边距，画布y内边距
         */
        var R = 26,
            canvasWidth = 400,
            canvasHeight = 320,
            OffsetX = 30,
            OffsetY = 30;
        var circleArr = [];
        var theSecondResult = [];
        var aa = [];
        var bb = [];
        var n = 1;


        function createCirclePoint(diffX, diffY) {
            for (var row = 0; row < 3; row++) {
                for (var col = 0; col < 3; col++) {
                    // 计算圆心坐标
                    var Point = {
                        X: (OffsetX + col * diffX + (col * 2 + 1) * R),
                        Y: (OffsetY + row * diffY + (row * 2 + 1) * R)
                    };
                    circleArr.push(Point);
                }
            }
        }
        window.onload = function() {
            var canvas = document.getElementById("lockCanvas");
            canvasWidth = document.body.offsetWidth; //网页可见区域宽
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            var cxt = canvas.getContext("2d");
            /**
             * 一行3个~
             * OffsetX为canvas x方向内边距
             * */
            var X = (canvasWidth - 2 * OffsetX - R * 2 * 3) / 2;
            var Y = (canvasHeight - 2 * OffsetY - R * 2 * 3) / 2;

            createCirclePoint(X, Y);

            bindEvent(canvas, cxt);
            //CW=2*offsetX+R*2*3+2*X


            Draw(cxt, circleArr, [], null);



        }

        function Draw(cxt, circleArr, pwdArr, touchPoint) {
            if (pwdArr.length > 0) {
                cxt.beginPath();
                for (var i = 0; i < pwdArr.length; i++) {
                    var pointIndex = pwdArr[i];
                    cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);
                }
                cxt.lineWidth = 10;
                cxt.strokeStyle = "#627eed";
                cxt.stroke();
                cxt.closePath();
                if (touchPoint != null) {
                    var lastPointIndex = pwdArr[pwdArr.length - 1];
                    var lastPoint = circleArr[lastPointIndex];
                    cxt.beginPath();
                    cxt.moveTo(lastPoint.X, lastPoint.Y);
                    cxt.lineTo(touchPoint.X, touchPoint.Y);
                    cxt.stroke();
                    cxt.closePath();
                }
            }
            for (var i = 0; i < circleArr.length; i++) {
                var Point = circleArr[i];
                cxt.fillStyle = "#627eed";
                cxt.beginPath();
                cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
                cxt.fillStyle = "#ffffff";
                cxt.beginPath();
                cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
                cxt.closePath();
                cxt.fill();
                if (pwdArr.indexOf(i) >= 0) {
                    cxt.fillStyle = "#627eed";
                    cxt.beginPath();
                    cxt.arc(Point.X, Point.Y, R - 16, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                }

            }
        }

        /**
         * 计算选中的密码用来保存以及判定
         */
        function getSelectPwd(touches, pwdArr) {
            for (var i = 0; i < circleArr.length; i++) {
                var currentPoint = circleArr[i];
                var xdiff = Math.abs(currentPoint.X - touches.pageX);
                var ydiff = Math.abs(currentPoint.Y - touches.pageY);
                var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
                if (dir > R || pwdArr.indexOf(i) >= 0)
                    continue;
                pwdArr.push(i);
                return pwdArr;
                break;
            }
        }

        /**
         * 绑定功能选择以及主要功能
         */
        function bindEvent(canvas, cxt) {
            var pwdArr = [];
            canvas.addEventListener("touchstart", function(e) {
                getSelectPwd(e.touches[0], pwdArr);
            }, false);
            canvas.addEventListener("touchmove", function(e) {
                e.preventDefault();
                var touches = e.touches[0];
                getSelectPwd(touches, pwdArr);
                cxt.clearRect(0, 0, canvasWidth, canvasHeight);
                Draw(cxt, circleArr, pwdArr, {
                    X: touches.pageX,
                    Y: touches.pageY
                });
            }, false);
            canvas.addEventListener("touchend", function(e) {
                cxt.clearRect(0, 0, canvasWidth, canvasHeight);
                Draw(cxt, circleArr, pwdArr, null);
                var theResult = pwdArr.join("->");



                // alert("密码结果是：" + theResult);

                if (document.getElementById("set").checked === true) { //选择功能为设置密码
                    if (pwdArr.length < 5) { //判断密码长度
                        alert("密码过短,请重新输入");
                        pwdArr = [];
                    } else {
                        localStorage.thePassword = theResult;
                        bb = theResult;
                        //次数
                        alert("设置的密码为：" + localStorage.thePassword);
                        alert("请再次输入密码");

                        n++;
                    }
                }
                secondbindEvent(canvas, cxt);
            }, false);
            if (document.getElementById("test").checked === true) { //选择功能为验证密码
                alert("请测试");
                if (pwdArr == localStorage.thePassword) {


                }
            }
            return n;

        }

        function secondbindEvent(canvas, cxt) {
            var pwdArr1 = [];
            canvas.addEventListener("touchstart", function(e) {
                getSelectPwd(e.touches[0], pwdArr1);
            }, false);
            canvas.addEventListener("touchmove", function(e) {
                e.preventDefault();
                var touches = e.touches[0];
                getSelectPwd(touches, pwdArr1);
                cxt.clearRect(0, 0, canvasWidth, canvasHeight);
                Draw(cxt, circleArr, pwdArr1, {
                    X: touches.pageX,
                    Y: touches.pageY
                });
            }, false);
            canvas.addEventListener("touchend", function(e) {
                cxt.clearRect(0, 0, canvasWidth, canvasHeight);
                Draw(cxt, circleArr, pwdArr1, null);
                var theResult1 = pwdArr1.join("->");
                alert("2222");
                aa = theResult1;
                localStorage.theSecond = aa;
                if (n >= 2) {

                    if (localStorage.theSecond = bb) {
                        alert("设置成功！");
                        n = 0;
                    } else if (localStorage.theSecond != bb) {
                        alert("两次输入密码不一致！");
                    }
                }
            }, false);


        }
    </script>
</head>

<body>
<canvas id="lockCanvas"></canvas>
<form action="" method="get">
    <label>
        <input name="password" id="set" type="radio" value="1" checked="checked" />设&nbsp置&nbsp密&nbsp码</br>
    </label>
    <label>
        <input name="password" id="test" type="radio" value="2" />验&nbsp证&nbsp密&nbsp码</label>
</form>
</body>

</html>